<script>
import { ref } from 'vue'
import img1 from "/src/assets/avatar.jpg"
import axios from "axios";
export default {
  props:{
    item:{},
    token:{}
  },
  data(){
    return{
      img1,
      isFollowed:ref(true),
      user:ref(null)
    }
  },
  mounted() {
    axios.defaults.headers.common['Authorization'] = `${this.$props.token}`;
  },
  methods:{
    changeHandle(){
      if(this.isFollowed === false){
        axios.post('http://localhost:8080/focus/add', {
          "FocusID": Number(this.$props.item.UserID)
        });
      }
      else{
        axios.post('http://localhost:8080/focus/delete', {
          "FocusID": Number(this.$props.item.UserID)
        });
      }
      this.isFollowed = !this.isFollowed;
    }
  }
}
</script>

<template>
<span style="width:350px;height:80px;background-color: #F7F7F7;border-radius: 10px;display: flex;flex-direction: row;justify-content: start;">
<el-avatar
    :class="'avatar'"
    :src="this.$props.item.ProfilePhoto"
    :fit="'cover'"
    :shape="'circle'"
    :size="60"
    style="margin:auto 0 auto 15px;"
/>
<span style="font-size: 20px;color:black;margin:auto 0 auto 10px;">{{ this.$props.item.UName }}</span>
  <span class="rounded-box"
        @click="changeHandle"
        :style="{backgroundColor: this.isFollowed ? '#A6A6A6' : '#FFD466',
                borderColor: this.isFollowed ? '#A6A6A6' : '#FFD466'}">
        {{isFollowed ? '已关注' : '关 注'}}
  </span>
</span>
</template>

<style scoped>
/*关注按钮*/
.rounded-box {
  width:55px;
  height:20px;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid #FFD466; /* 边框颜色 */
  border-radius: 10px; /* 圆角弧度 */
  padding: 8px; /* 内边距 */
  text-align: center; /* 文字居中 */
  color:white;
  margin:auto 20px auto auto;
}
.rounded-box:hover{
  cursor: pointer;
}
</style>